<template>
    <van-nav-bar title="退货详情" left-text="" left-arrow @click-left="goBack" />
    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>{{ detail.status_text }}</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/assets/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 收货地址 -->
            <div class="aui-flex">
                <div style="font-size: 16px">退货地址：</div>
                <div class="aui-flex-box">
                    <h3>
                        {{ detail.contacts }} <em> {{ detail.telephone }}</em>
                    </h3>
                    <p>{{ detail.address }}</p>
                </div>
            </div>

            <!-- 退货理由 -->
            <div class="aui-flex">
                <div style="font-size: 16px">退货理由：</div>
                <div class="aui-flex-box">
                    {{ detail.refundreason }}
                </div>
            </div>

            <!-- 寄件地址 -->
            <div class="aui-flex" v-if="back">
                <div style="font-size: 16px">寄件地址：</div>
                <div class="aui-flex-box">
                    <h3>
                        {{ back.contact }} <em>{{ back.phone }}</em>
                    </h3>
                    <p>{{ back.region_text }}</p>
                </div>
            </div>

            <!-- 商家协商 -->
            <div class="aui-flex">
                <div style="font-size: 16px">商家协商：</div>
                <div class="aui-flex-box">
                    {{ detail.examinereason }}
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="aui-commodity-bg">
                <div class="item" v-for="item in detail.info">
                    <div class="aui-flex">
                        <div class="aui-commodity-img">
                            <router-link :to="{ path: '/product/info', query: { proid: item.proid } }">
                                <img :src="item.product.thumb_text" />
                            </router-link>
                        </div>
                        <div class="aui-flex-box">
                            <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
                            <p>商品单价：￥{{ item.price }}</p>
                            <span class="aui-barter-time">七天退换</span>
                        </div>
                        <div>
                            <h5>￥{{ item.total }}</h5>
                            <p class="aui-sml-text">X{{ item.pronum }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 物流信息 -->
            <van-steps direction="vertical" :active="0">
                <van-step v-for="(item, index) in expresslist" :key="index">
                    <h3>{{ item.status }}</h3>
                    <p>{{ item.time }}</p>
                </van-step>
            </van-steps>

        </section>
    </section>
</template>
<script setup>
const router = useRouter();
const route = useRoute();
const goBack = () => {
    history.back()
}
const orderid = ref(route.query.orderid ?? 0)
const detail = ref({})
const { cookies } = useCookies();
const LoginUser = reactive(cookies.get("LoginUser") ?? {});
const expresslist = ref([])
const back = ref({})
onBeforeMount(() => {
    getInfoData()
})
const getInfoData = async () => {
    let result = await Api.orderInfo({
        busid: LoginUser.id,
        orderid: orderid.value,
    });
    if (result.code == 1) {
        detail.value = result.data
    }

    let res = await Api.orderBack({
        busid: LoginUser.id,
        orderid: orderid.value,
    })
    if (res.code == 1) {
        back.value = res.data.back
        expresslist.value = res.data.expresslist
    }
}

</script>
<style>
@import url('/assets/css/info.css');
</style>